<template>
    <section class="public-header-content" id="HouseQA">
        <header>常见问题</header>
        <div class="content clearfix">
            <ul>
                <li class="clearfix" v-for="(item, index) in houseQAItem" :key="index">
                    <h4 class="webkit-text-overflow-1lines">
                        <i>问</i>{{isNull0(item.title)}}
                    </h4>
                    <aside>
                        <p class="webkit-text-overflow-2lines">
                            <i>答：</i> {{isNull0(item.description)}}
                        </p>
                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" title="查看详情" alt="查看详情">查看详情</router-link>
                    </aside>
                </li>
            </ul>
            <router-link to="/Question" title="查看更多常见问题" alt="查看更多常见问题">查看更多问题>></router-link>
            <aside>
                <router-link to="/Question" class="btn btn-primary maifangwenti-zhaozhuanjia" title="买房有问题？赶快找专家" alt="买房有问题？赶快找专家">买房有问题？赶快找专家</router-link>
            </aside>
        </div>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                houseQAItem:[], //百科常见问题数据
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取百科常见问题——房产问题3条
            this.getHouseQAThreeData();
        },
        methods: {
            //获取百科常见问题——房产问题3条
            getHouseQAThreeData() {
                this.$get('/news/list/10/1/3').then(res => {
                    if (res.status == 0) {
                        this.houseQAItem = res.list;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
        },
        components: {

        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
         #HouseQA {
            > .content {
                >ul{
                    >li{
                        margin: 30px 0 0 0;
                        >h4{
                            font-size: 16px;
                            color: #568bdb;
                            >i{
                                display: inline-block;
                                padding: 4px 6px;
                                background: #568bdb;
                                font-size: 14px;
                                color: #fff;
                                margin: 0 12px 0 0;
                            }
                        }
                        >aside{
                            padding: 20px;
                            background: #f9f9f9;
                            margin: 15px 0 0 0;
                            border: 1px solid #efefef;
                            >p{
                                font-size: 14px;
                                text-align: left;
                                text-indent: 0;
                                >i{
                                    color: #568bdb;
                                }
                            }
                            >a{
                                display: inline-block;
                                color: #568bdb;
                            }
                        }
                    }
                    >li:first-of-type{
                        margin: 0;
                    }
                }
                >a{
                    color: #568bdb;
                    display: block;
                    margin: 17px 0;
                }
                >aside{
                    margin: 17px 0;
                    text-align: center;
                    >a.maifangwenti-zhaozhuanjia{
                        display: inline-block;
                        border: 2px solid #568bdb;
                        background: #fff;
                        padding: 10px 20px;
                        font-size: 16px;
                        color: #568bdb;
                    }
                }
            }
        }

    }
</style>
